import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', // 网页打开第一次默认路由路径就是‘/’
    redirect: '/home', // 会导致路由规则数组再次匹配
    component: () => import('@/views/layout'),
    children: [
      // 侧边栏导航 点击会切换路由地址 路由地址是靠数据请求回来铺设上去的
      // 所以路由规则要配合它 保持一致
      // 二级路由不用写斜杠/  他自动和一级拼接
      {
        path: 'home',
        component: () => import('@/views/home')
      },
      {
        path: 'user-info',
        component: () => import('@/views/user/userInfo.vue')
      },
      {
        path: 'user-avatar', // 必须用这个值
        component: () => import('@/views/user/userAvatar.vue')
      },
      {
        path: 'user-pwd', // 必须用这个值
        component: () => import('@/views/user/userPwd.vue')
      },
      {
        path: 'art-cate', // 必须用这个值
        component: () => import('@/views/article/artCate.vue')
      },
      {
        path: 'art-list', // 必须用这个值
        component: () => import('@/views/article/artList.vue')
      }
    ]
    // 默认打开直接看到布局页面
  },
  {
    path: '',
    redirect: '/login'
  },
  {
    path: '/reg',
    component: () => import('@/views/register')
    // webpack提供import函数来路由懒加载导入组件
    // 路由懒加载；就是页面路由路径切换到/reg，才去加载对应组件的代码
    // 好处：让首页加载文件体积更小，打开更快
  },
  {
    path: '/login',
    component: () => import('@/views/login')
  }
]

const router = new VueRouter({
  routes
})
const whiteList = ['/login', '/reg'] // 白名单：无需登录就能访问的路由地址
// 全局前置路由守卫
// 浏览器第一次打开项目页面 会触发一次全局前置路由守卫
// 有token就证明登录了 无token未登录
// next()如果强制切换路由地址 会再次走路由守卫 会再次去匹配路由表
router.beforeEach((to, from, next) => {
  const token = store.state.token
  if (token) {
    // 登录了
    if (!store.state.userInfo.username) {
      // 你现在本地有token值才去请求用户信息
      //! store.state.userInfo.username 切换路由路径没必要再次请求
      store.dispatch('getUserInfoActions')
    }
    next()
  } else {
    // 未登录
    // includes 数组方法  作用：判断值是否在数组里面出现过  出现过就返回ture
    if (whiteList.includes(to.path)) {
      // 未登录 可以访问的路由地址 则放行(路由全局守卫不会再次触发了 而是匹配路由表 让组件挂载)
      next()
    } else {
      // next()强制跳转到登录页
      next('/login')
    }
  }
})
export default router
